<template>
	<div class="page flex-column">
		<van-nav-bar title="会员编辑" left-arrow @click-left="goBack" />
		<div class="page-body">
			<el-form ref="form" label-position="top" :model="form" :rules="rules">
				<el-form-item label="所属门店" prop="dept_id">
					<!-- <cus-select
						:list="shopList"
						label="dept_name"
						prop="dept_id"
						v-model="form.dept_id"
						placeholder="请选择所属门店"
					/> -->
					<choice-shop
						placeholder="请选择所属门店"
						:biz_id="form.biz_id"
						v-model="form.dept_id"
					/>
				</el-form-item>
				<el-form-item label="客户名称" prop="cus_name">
					<div class="item-con flex">
						<el-input
							placeholder="请填写客户名称"
							v-model="form.cus_name"
							maxlength="12"
						/>
					</div>
				</el-form-item>
				<el-form-item label="客户微信号" prop="cus_wx">
					<div class="item-con flex">
						<el-input
							placeholder="请填写客户微信号"
							v-model.trim="form.cus_wx"
							maxlength="30"
						/>
					</div>
				</el-form-item>
				<el-form-item label="客户手机号" prop="cus_mobile">
					<div class="item-con flex">
						<el-input
							placeholder="请填写客户手机号"
							v-model.trim="form.cus_mobile"
							maxlength="11"
						/>
					</div>
				</el-form-item>
				<el-form-item label="加微时间" prop="wechat_join_day">
					<cus-time
						:fixation="false"
						placeholder="请选择加微时间"
						v-model="form.wechat_join_day"
						type="date"
						disabled
					/>
				</el-form-item>
				<el-form-item label="加微方式" prop="id_join_type">
					<cus-select
						filt
						:list="wxJoinTypeList"
						label="label"
						prop="value"
						v-model="form.id_join_type"
						placeholder="请选择加微方式"
						disabled
					/>
				</el-form-item>
				<el-form-item label="来源渠道" prop="source_id">
					<cus-select
						filt
						:list="sourceList"
						label="cname"
						prop="id"
						v-model="form.source_id"
						placeholder="请选择来源渠道"
						disabled
					/>
				</el-form-item>
				<!-- <el-form-item label="会员等级" prop="cus_grade">
					<cus-select
						filt
						:list="bizRefData.level"
						label="cl_name"
						prop="cl_id"
						v-model="form.cus_grade"
						placeholder="请选择会员等级"
					/>
				</el-form-item> -->
				<el-form-item label="会员性别" prop="cus_sex">
					<cus-select
						filt
						:list="sexList"
						label="label"
						prop="value"
						v-model="form.cus_sex"
						placeholder="请选择会员性别"
					/>
				</el-form-item>
				<el-form-item label="会员生日" prop="cus_birthday">
					<cus-time
						:fixation="false"
						placeholder="请选择会员生日"
						v-model="form.cus_birthday"
						type="date"
					/>
				</el-form-item>
				<el-form-item label="所在地区" prop="area">
					<zm-area v-model="form.area" placeholder="请选择省市区" />
				</el-form-item>
				<el-form-item label="详细地址" prop="cus_addr">
					<div class="item-con flex">
						<el-input placeholder="请填写详细地址" v-model="form.cus_addr" />
					</div>
				</el-form-item>
				<el-form-item label="会员备注" prop="add_remarks">
					<div class="item-con">
						<el-input
							v-model="form.add_remarks"
							placeholder="请填写会员备注"
							type="textarea"
							:rows="3"
						/>
					</div>
				</el-form-item>
			</el-form>
		</div>
		<div class="submit">
			<el-button type="primary" :disabled="loading" :loading="saving" @click="submit">
				修改会员
			</el-button>
		</div>
	</div>
</template>
<script>
import { NavBar } from "vant";
import { validate } from "@/utils/validate";
import CusSelect from "./components/cus-select";
import CusTime from "./components/cus-time";
import ZmArea from "./components/zm-area";
import constant from "@/constant";
import ChoiceShop from "./components/choice-shop";

export default {
	name: "MobileCusEdit",
	components: {
		VanNavBar: NavBar,
		CusSelect,
		CusTime,
		ZmArea,
		ChoiceShop
	},
	data() {
		const validateMobile = (rule, value, callback) => {
			if (!this.isEditMobile) {
				return callback();
			}
			if (!validate.mobile.test(value)) {
				return callback(new Error("客户手机号格式不正确"));
			}
			return callback();
		};
		const validateWx = (rule, value, callback) => {
			if (!this.isEditWx) {
				return callback();
			}
			let len = value.length;
			if (len < 6 || len > 30) {
				// return callback(new Error("微信号6-30个字数"));
			}
			if (!validate.wechat.test(value)) {
				// return callback(new Error("格式为字母、下划线或减号，以字母开头"));
			}
			return callback();
		};
		return {
			wxJoinTypeList: constant.WX_JOIN_TYPE,
			sourceList: [],
			gradeList: [],
			sexList: [
				{ label: "男", value: 1 },
				{ label: "女", value: 2 }
			],
			detail: {},
			form: {
				bra_id:'',
				// tag_name:'',
				biz_id: 0,
				dept_id: "",
				cus_name: "",
				cus_mobile: "",
				source_id: "",
				channel_id: "",
				// cus_grade: 0,
				cus_sex: 2,
				add_remarks: "",
				cus_area: "",
				cus_addr: "",
				cus_birthday: "",
				cus_type: "",
				wechat_join_day: "",
				cus_wx: "",
				id_join_type: "",
				area: []
			},
			rules: {
				dept_id: [{ required: true, message: "请选择门店" }],
				cus_name: [{ required: true, message: "请填写客户名称" }],
				cus_wx: [
					{ required: true, message: "请填写客户微信号" },
					{ validator: validateWx }
					// {
					// 	pattern: validate.wechat,
					// 	message: "格式为字母、下划线或减号，以字母开头"
					// }
				],
				cus_mobile: [
					// { required: true, message: "请输入新手机号" },
					{ validator: validateMobile }
					// { pattern: validate.mobile, message: "客户手机号格式不正确" }
				],
				wechat_join_day: [{ required: true, message: "请选择加微日期" }],
				id_join_type: [{ required: true, message: "请选择加微类型" }],
				biz_id: [{ required: true, message: "请选择事业部" }],
				source_id: [{ required: true, message: "请选择来源渠道" }],
				// cus_grade: [{ required: true, message: "请选择会员等级" }],
				cus_type: [{ required: true, message: "请选择转介绍" }]
			},
			loading: true,
			saving: false
		};
	},
	computed: {
		isEditMobile() {
			return this.detail.cus_mobile !== this.form.cus_mobile;
		},
		isEditWx() {
			return this.detail.base_wx !== this.form.cus_wx;
		},
		bizRefData() {
			const { biz_id } = this.form;
			return this.getBizRefData(biz_id);
		}
	},
	created() {
		const { query } = this.$route;
		this.detail = { ...query };
		this.getDetail();
		this.getSource();
		this.getLevelList();
	},
	methods: {
		// 获取详情
		async getDetail() {
			const { cus_id } = this.$route.query;
			this.loading = true;
			const { info } = await this.$service.customer
				.detail({
					cus_id,
					biz_id: 0
				})
				.done(() => {
					this.loading = false;
				});
			this.detail = {
				...info,
				base_wx: atob(info.base_wx ?? "")
			};
			Object.keys(this.form).forEach(key => {
				this.form[key] = info[key] ?? "";
			});
			if (this.form.dept_id == 0) {
				this.form.dept_id = "";
			}
			const { remarks, cus_area } = info;
			this.form.cus_wx = atob(info.base_wx ?? "");
			this.form.add_remarks = remarks;
			try {
				this.form.area = JSON.parse(cus_area) || [];
				// this.form.area = (this.detail.cus_area || "").split(",");
			} catch (error) {
				this.form.area = (cus_area || "").split(",").filter(v => v != "");
			}
		},
		submit() {
			this.$refs.form.validate(async (valid, errors) => {
				this.showFormErr(errors);
				if (!valid) return;
				const { cus_id, biz_id } = this.detail;
				const { area, source_id, cus_mobile, dept_id, ...args } = this.form;
				let form = {
					...args,
					cus_id,
					biz_id,
					dept_id,
					channel_id: source_id,
					source_id,
					add_dept_id: dept_id,
					cus_area: area.join(","),
					// tag_name:tag_name.join(','),
					cus_mobile: this.isEditMobile ? cus_mobile : "99" //特殊情况
				};
				form.province = area[0]; //省
				form.city = area[1]; //市
				form.area = area[2]; //区
				this.saving = true;
				await this.$service.customer.update(form).done(() => {
					this.saving = false;
				});
				this.$message.closeAll();
				this.$message.success("修改成功");
				this.goBack();
			});
		},
		// 后退
		goBack() {
			this.$router.go(-1);
		},

		//获取来源渠道
		async getSource() {
			const { biz_id } = this.detail;
			this.sourceList = [];
			if (!biz_id) return;
			const data = await this.$service.source.list({ biz_id });
			this.sourceList = data;
		},
		// 会员等级
		async getLevelList() {
			const { biz_id } = this.form;
			// await this.getBizRefLevel(biz_id);
		},
		async getTagList() {
			// const { biz_id } = this.form;
			// const res = await this.$service.customer.tag({
			// 	biz_id
			// });
			// this.tagList = res.lists;
		}
	}
};
</script>
<style lang="scss" scoped>
.page {
	height: 100vh;
	overflow: hidden;
	background: #fff;
	&-body {
		position: relative;
		flex: 1;
		overflow: auto;
		box-sizing: border-box;
		padding: 0.3rem 0;
		&::before {
			border-top: 1px solid #ebedf0;
			position: absolute;
			box-sizing: border-box;
			content: " ";
			pointer-events: none;
			top: -50%;
			right: -50%;
			bottom: -50%;
			left: -50%;
			transform: scale(0.5);
			z-index: 10;
		}
	}
}

.item-con {
	align-items: center;
	padding-bottom: 0.1rem;
	border-bottom: 1px solid #dfdfdf;
	.icon {
		color: #999;
	}
}
.submit {
	box-sizing: border-box;
	padding: 0.2rem 0.3rem;
	box-shadow: 0 -0.04rem 0.1rem 0.01rem rgba(206, 206, 206, 0.2);
	.el-button {
		width: 100%;
		height: 0.7rem;
		font-size: 0.28rem;
	}
}
</style>
